import { useTimestamp } from '@/hooks/tools/useTimestamp';
import ToolPageTemplate from '@/components/ToolPageTemplate';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import RefreshIcon from '@mui/icons-material/Refresh';
import ScheduleIcon from '@mui/icons-material/Schedule';
import {
    Alert,
    Box,
    Button,
    Chip,
    FormControl,
    FormHelperText,
    Grid,
    IconButton,
    InputLabel,
    MenuItem,
    Paper,
    Select,
    Snackbar,
    Stack,
    TextField,
    Tooltip,
    Typography,
    alpha
} from '@mui/material';

const TimestampPage = () => {
    const {
        // 状态
        currentTimestamp,
        timestamp,
        dateTime,
        inputDateTime,
        convertedTimestamp,
        timestampUnit,
        timezone,
        copySuccess,
        error,
        // 设置函数
        setTimestamp,
        setInputDateTime,
        setTimestampUnit,
        setTimezone,
        // 操作函数
        convertTimestampToDateTime,
        convertDateTimeToTimestamp,
        copyToClipboard,
        useCurrentTimestamp,
        useCurrentDateTime,
        getCurrentTimeInTimezone,
        clearError,
        timezones
    } = useTimestamp();

    return (
        <ToolPageTemplate 
            title="时间戳转换工具"
            description="在Unix时间戳和人类可读的日期时间格式之间进行转换"
            category="开发工具"
            categoryColor="#1976d2"
        >
            {/* 快速信息区域 */}
            <Box sx={{ mb: 4 }}>
                <Stack direction="row" spacing={2} justifyContent="center" flexWrap="wrap">
                    <Chip 
                        icon={<ScheduleIcon />} 
                        label="时间转换" 
                        variant="outlined" 
                        color="primary"
                    />
                    <Chip 
                        icon={<AccessTimeIcon />} 
                        label="实时更新" 
                        variant="outlined" 
                        color="secondary"
                    />
                </Stack>
            </Box>

            {/* 设置选项 */}
            <Paper 
                elevation={0} 
                sx={{ 
                    p: 3, 
                    mb: 4, 
                    borderRadius: 3, 
                    border: '1px solid', 
                    borderColor: 'divider'
                }}
            >
                <Typography 
                    variant="h6" 
                    sx={{ 
                        mb: 3, 
                        fontWeight: 700,
                        display: 'flex',
                        alignItems: 'center',
                        gap: 1
                    }}
                >
                    <ScheduleIcon color="primary" />
                    转换设置
                </Typography>
                <Grid container spacing={3}>
                    <Grid item xs={12} sm={6}>
                        <FormControl fullWidth>
                            <InputLabel id="timestamp-unit-label">时间戳单位</InputLabel>
                            <Select
                                labelId="timestamp-unit-label"
                                value={timestampUnit}
                                label="时间戳单位"
                                onChange={(e) => setTimestampUnit(e.target.value)}
                                sx={{ borderRadius: 2 }}
                            >
                                <MenuItem value="seconds">秒 (s)</MenuItem>
                                <MenuItem value="milliseconds">毫秒 (ms)</MenuItem>
                            </Select>
                            <FormHelperText>选择时间戳的单位</FormHelperText>
                        </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <FormControl fullWidth>
                            <InputLabel id="timezone-label">时区</InputLabel>
                            <Select
                                labelId="timezone-label"
                                value={timezone}
                                label="时区"
                                onChange={(e) => {
                                    setTimezone(e.target.value);
                                    // 如果已有转换结果，重新转换
                                    if (timestamp) setTimeout(convertTimestampToDateTime, 0);
                                    if (inputDateTime) setTimeout(convertDateTimeToTimestamp, 0);
                                }}
                                sx={{ borderRadius: 2 }}
                            >
                                {timezones.map((tz) => (
                                    <MenuItem key={tz.value} value={tz.value}>
                                        {tz.label}
                                    </MenuItem>
                                ))}
                            </Select>
                            <FormHelperText>选择日期时间的时区</FormHelperText>
                        </FormControl>
                    </Grid>
                </Grid>
            </Paper>

            <Grid container spacing={4}>
                {/* 时间戳转日期时间 */}
                <Grid item xs={12} lg={6}>
                    <Paper 
                        elevation={0} 
                        sx={{ 
                            p: 3, 
                            borderRadius: 3, 
                            border: '1px solid', 
                            borderColor: 'divider',
                            height: 'fit-content'
                        }}
                    >
                        <Typography 
                            variant="h6" 
                            sx={{ 
                                mb: 3, 
                                fontWeight: 700,
                                display: 'flex',
                                alignItems: 'center',
                                gap: 1
                            }}
                        >
                            <ScheduleIcon color="primary" />
                            时间戳 → 日期时间
                        </Typography>

                        <Box sx={{ display: 'flex', mb: 3, gap: 1 }}>
                            <TextField
                                fullWidth
                                label={`输入${timestampUnit === 'seconds' ? '秒' : '毫秒'}时间戳`}
                                value={timestamp}
                                onChange={(e) => setTimestamp(e.target.value)}
                                placeholder={`例如: ${timestampUnit === 'seconds' ? '1609459200' : '1609459200000'}`}
                                variant="outlined"
                                sx={{ 
                                    '& .MuiOutlinedInput-root': {
                                        borderRadius: 2
                                    }
                                }}
                            />
                            <Tooltip title="使用当前时间戳">
                                <IconButton 
                                    onClick={useCurrentTimestamp} 
                                    color="primary"
                                    sx={{ 
                                        bgcolor: alpha('#1976d2', 0.1),
                                        '&:hover': { bgcolor: alpha('#1976d2', 0.2) }
                                    }}
                                >
                                    <AccessTimeIcon />
                                </IconButton>
                            </Tooltip>
                        </Box>

                        <Button
                            variant="contained"
                            onClick={convertTimestampToDateTime}
                            fullWidth
                            size="large"
                            sx={{ 
                                mb: 3,
                                borderRadius: '25px',
                                py: 1.5,
                                textTransform: 'none',
                                fontWeight: 600
                            }}
                        >
                            转换为日期时间
                        </Button>

                        {dateTime && (
                            <Box sx={{ mt: 2 }}>
                                <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 600 }}>
                                    转换结果 ({timezone}):
                                </Typography>
                                <Box sx={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    p: 2,
                                    bgcolor: alpha('#4caf50', 0.1),
                                    borderRadius: 2,
                                    border: `1px solid ${alpha('#4caf50', 0.3)}`
                                }}>
                                    <Typography variant="body1" sx={{ flexGrow: 1, fontFamily: 'monospace' }}>
                                        {dateTime}
                                    </Typography>
                                    <Tooltip title="复制结果">
                                        <IconButton
                                            size="small"
                                            onClick={() => copyToClipboard(dateTime)}
                                            sx={{ 
                                                bgcolor: alpha('#4caf50', 0.1),
                                                '&:hover': { bgcolor: alpha('#4caf50', 0.2) }
                                            }}
                                        >
                                            <ContentCopyIcon fontSize="small" />
                                        </IconButton>
                                    </Tooltip>
                                </Box>
                            </Box>
                        )}
                    </Paper>
                </Grid>

                {/* 日期时间转时间戳 */}
                <Grid item xs={12} lg={6}>
                    <Paper 
                        elevation={0} 
                        sx={{ 
                            p: 3, 
                            borderRadius: 3, 
                            border: '1px solid', 
                            borderColor: 'divider',
                            height: 'fit-content'
                        }}
                    >
                        <Typography 
                            variant="h6" 
                            sx={{ 
                                mb: 3, 
                                fontWeight: 700,
                                display: 'flex',
                                alignItems: 'center',
                                gap: 1
                            }}
                        >
                            <AccessTimeIcon color="primary" />
                            日期时间 → 时间戳
                        </Typography>

                        <Box sx={{ display: 'flex', mb: 3, gap: 1 }}>
                            <TextField
                                fullWidth
                                label={`输入日期时间 (${timezone})`}
                                value={inputDateTime}
                                onChange={(e) => setInputDateTime(e.target.value)}
                                placeholder="例如: 2021-01-01 00:00:00"
                                variant="outlined"
                                sx={{ 
                                    '& .MuiOutlinedInput-root': {
                                        borderRadius: 2
                                    }
                                }}
                            />
                            <Tooltip title="使用当前日期时间">
                                <IconButton 
                                    onClick={useCurrentDateTime} 
                                    color="primary"
                                    sx={{ 
                                        bgcolor: alpha('#1976d2', 0.1),
                                        '&:hover': { bgcolor: alpha('#1976d2', 0.2) }
                                    }}
                                >
                                    <RefreshIcon />
                                </IconButton>
                            </Tooltip>
                        </Box>

                        <Button
                            variant="contained"
                            onClick={convertDateTimeToTimestamp}
                            fullWidth
                            size="large"
                            sx={{ 
                                mb: 3,
                                borderRadius: '25px',
                                py: 1.5,
                                textTransform: 'none',
                                fontWeight: 600
                            }}
                        >
                            转换为时间戳
                        </Button>

                        {convertedTimestamp && (
                            <Box sx={{ mt: 2 }}>
                                <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 600 }}>
                                    转换结果 ({timestampUnit === 'seconds' ? '秒' : '毫秒'}):
                                </Typography>
                                <Box sx={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    p: 2,
                                    bgcolor: alpha('#ff9800', 0.1),
                                    borderRadius: 2,
                                    border: `1px solid ${alpha('#ff9800', 0.3)}`
                                }}>
                                    <Typography variant="body1" sx={{ flexGrow: 1, fontFamily: 'monospace' }}>
                                        {convertedTimestamp}
                                    </Typography>
                                    <Tooltip title="复制结果">
                                        <IconButton
                                            size="small"
                                            onClick={() => copyToClipboard(convertedTimestamp)}
                                            sx={{ 
                                                bgcolor: alpha('#ff9800', 0.1),
                                                '&:hover': { bgcolor: alpha('#ff9800', 0.2) }
                                            }}
                                        >
                                            <ContentCopyIcon fontSize="small" />
                                        </IconButton>
                                    </Tooltip>
                                </Box>
                            </Box>
                        )}
                    </Paper>
                </Grid>
            </Grid>

            {/* 提示信息 */}
            <Snackbar
                open={!!copySuccess}
                autoHideDuration={3000}
                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
            >
                <Alert severity="success" sx={{ width: '100%' }}>
                    {copySuccess}
                </Alert>
            </Snackbar>

            <Snackbar
                open={!!error}
                autoHideDuration={6000}
                onClose={clearError}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <Alert severity="error" onClose={clearError} sx={{ width: '100%' }}>
                    {error}
                </Alert>
            </Snackbar>

            {/* 当前时间信息 */}
            <Paper 
                elevation={0} 
                sx={{
                    p: 3, 
                    mt: 4, 
                    borderRadius: 3, 
                    border: '1px solid', 
                    borderColor: 'divider',
                    background: `linear-gradient(135deg, ${alpha('#1976d2', 0.05)} 0%, ${alpha('#1976d2', 0.02)} 100%)`
                }}
            >
                <Typography 
                    variant="h6" 
                    sx={{ 
                        mb: 3, 
                        fontWeight: 700,
                        display: 'flex',
                        alignItems: 'center',
                        gap: 1
                    }}
                >
                    <AccessTimeIcon color="primary" />
                    当前时间信息
                </Typography>
                <Grid container spacing={3}>
                    <Grid item xs={12} sm={6}>
                        <Box sx={{ 
                            p: 2, 
                            bgcolor: 'background.paper', 
                            borderRadius: 2,
                            border: '1px solid',
                            borderColor: 'divider'
                        }}>
                            <Typography variant="body2" color="text.secondary" gutterBottom>
                                当前时间戳 (秒)
                            </Typography>
                            <Typography variant="h6" color="primary" sx={{ fontFamily: 'monospace' }}>
                                {currentTimestamp}
                            </Typography>
                        </Box>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <Box sx={{ 
                            p: 2, 
                            bgcolor: 'background.paper', 
                            borderRadius: 2,
                            border: '1px solid',
                            borderColor: 'divider'
                        }}>
                            <Typography variant="body2" color="text.secondary" gutterBottom>
                                当前时间戳 (毫秒)
                            </Typography>
                            <Typography variant="h6" color="primary" sx={{ fontFamily: 'monospace' }}>
                                {currentTimestamp * 1000}
                            </Typography>
                        </Box>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <Box sx={{ 
                            p: 2, 
                            bgcolor: 'background.paper', 
                            borderRadius: 2,
                            border: '1px solid',
                            borderColor: 'divider'
                        }}>
                            <Typography variant="body2" color="text.secondary" gutterBottom>
                                当前日期时间
                            </Typography>
                            <Typography variant="h6" color="primary">
                                {getCurrentTimeInTimezone()}
                            </Typography>
                        </Box>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <Box sx={{ 
                            p: 2, 
                            bgcolor: 'background.paper', 
                            borderRadius: 2,
                            border: '1px solid',
                            borderColor: 'divider'
                        }}>
                            <Typography variant="body2" color="text.secondary" gutterBottom>
                                当前时区
                            </Typography>
                            <Typography variant="h6" color="primary">
                                {timezone}
                            </Typography>
                        </Box>
                    </Grid>
                </Grid>
            </Paper>

        </ToolPageTemplate>
    );
};

export default TimestampPage;